<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>日报管理系统</title>
    <link rel="shortcut icon" href="/static/paper/favicon.ico"> <!-- 修改为绝对路径 -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/static/paper/plugins/element-ui/index.css"/> <!-- 修改为绝对路径 -->
    <link rel="stylesheet" href="/static/paper/styles/common.css"/> <!-- 修改为绝对路径 -->
    <link rel="stylesheet" href="/static/paper/styles/index.css"/> <!-- 修改为绝对路径 -->
    <link rel="stylesheet" href="/static/paper/styles/icon/iconfont.css"/> <!-- 修改为绝对路径 -->
    <style>
        .body {
            min-width: 1366px;
        }

        .app-main {
            height: calc(100% - 64px);
        }

        .app-main .divTmp {
            width: 100%;
            height: 100%;
        }

         .logo2 {
            background-color: #F7F7F7; /* 背景颜色 */
            width: 198px; /* 设置宽度为 190px */
            height: 64px; /* 设置高度为 64px */
            display: flex; /* 使用 flexbox 布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            box-sizing: border-box; /* 包含内边距和边框 */
            border: 1px solid #ccc; /* 可选：边框样式，便于查看效果 */
        }
    </style>
</head>

<body>
<div class="app" id="app">
    <div class="app-wrapper openSidebar clearfix">
        <!-- sidebar -->
        <div class="sidebar-container">
            <div class="logo2" style="background-color: #F7F7F7 ">
                <img src="/static/paper/images/login/logo.png" alt="" style="width: 180px; height: 35px"/>
                <!-- 修改为绝对路径 -->
            </div>

            <el-scrollbar wrap-class="scrollbar-wrapper">
                <el-menu
                        :default-active="defAct"
                        :unique-opened="false"
                        :collapse-transition="false"
                        background-color="#304156"
                        text-color="#bfcbd9"
                        active-text-color="#4080ff"
                        :style="{ width: '100%' }"
                >
                    <div v-for="item in menuList" :key="item.id">
                        <el-submenu :index="item.id" v-if="item.children && item.children.length > 0">
                            <template slot="title">
                                <i class="iconfont" :class="item.icon"></i>
                                <span>{{ item.name }}</span>
                            </template>
                            <el-menu-item
                                    v-for="sub in item.children"
                                    :index="sub.id"
                                    :key="sub.id"
                                    @click="menuHandle(sub, false)"
                            >
                                <i :class="iconfont" :class="sub.icon"></i>
                                <span slot="title">{{ sub.name }}</span>
                            </el-menu-item>
                        </el-submenu>
                        <el-menu-item v-else :index="item.id" @click="menuHandle(item, false)">
                            <i class="iconfont" :class="item.icon"></i>
                            <span slot="title">{{ item.name }}</span>
                        </el-menu-item>
                    </div>
                </el-menu>
            </el-scrollbar>
        </div>
        <div class="main-container">
            <div class="navbar">
                <div class="head-lable">
                    <span v-if="goBackFlag" class="goBack" @click="goBack()">
                        <img src="/static/paper/images/icons/btn_back@2x.png" alt=""/> 返回
                    </span>
                    <span>{{ headTitle }}</span>
                </div>
                <div class="right-menu">
                    <div class="avatar-wrapper">{{ userInfo.name }}</div>
                    <div class="logout" @click="logout">退出</div>
                    <img src="/static/paper/images/icons/btn_close@2x.png" class="outLogin" alt="退出" @click="logout"/>
                </div>
            </div>
            <div class="app-main" v-loading="loading">
                <div class="divTmp" v-show="loading"></div>
                <iframe
                        id="cIframe"
                        class="c_iframe"
                        name="cIframe"
                        :src="iframeUrl"
                        width="100%"
                        height="auto"
                        frameborder="0"
                        v-show="!loading"
                ></iframe>
            </div>
        </div>
    </div>
</div>

<!-- 引入 JavaScript -->
<script src="/static/paper/plugins/vue/vue.js"></script> <!-- 修改为绝对路径 -->
<script src="/static/paper/plugins/element-ui/index.js"></script> <!-- 修改为绝对路径 -->
<script src="/static/paper/plugins/axios/axios.min.js"></script> <!-- 修改为绝对路径 -->
<script src="/static/paper/js/request.js"></script> <!-- 修改为绝对路径 -->
<script src="/static/paper/api/login.js"></script> <!-- 修改为绝对路径 -->

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                defAct: '1',
                menuActived: '1',
                userInfo: {},
                menuList: [
                    {
                        id: '1',
                        name: '首页',
                        url: '/static/paper/page/home/home.html', // 修改为绝对路径
                    },
                    {
                        id: '3',
                        name: '日报管理',
                        url: '/static/paper/page/category/new_list.html', // 修改为绝对路径
                    },
                    {
                        id: '2',
                        name: '员工管理',
                        url: '/static/paper/page/member/list.html', // 修改为绝对路径
                    },
                    {
                        id: '4',
                        name: '设置',
                        url: '/static/paper/page/configuration/config.html', // 修改为绝对路径
                    },


                ],
                iframeUrl: '/static/paper/page/home/home.html', // 修改为绝对路径
                headTitle: '首页', // 更新标题
                goBackFlag: false,
                loading: true,
                timer: null
            }
        },
        computed: {},
        created() {
            const userInfo = window.localStorage.getItem('userInfo')
            console.log(userInfo);
            if (userInfo) {
                this.userInfo = JSON.parse(userInfo)
            }
            this.closeLoading()
        },
        beforeDestroy() {
            this.timer = null
            clearTimeout(this.timer)
        },
        mounted() {
            window.menuHandle = this.menuHandle
        },
        methods: {
            logout() {
                logoutApi().then((res) => {
                    if (res.status === "success") {
                        localStorage.removeItem('userInfo')
                        window.location.href = '/static/paper/page/login/login.html' // 修改为绝对路径
                    }
                })
            },
            goBack() {
                const menu = this.menuList.find(item => item.id === this.menuActived)
                this.menuHandle(menu, false)
            },
            menuHandle(item, goBackFlag) {
                this.loading = true
                this.menuActived = item.id
                this.iframeUrl = item.url
                this.headTitle = item.name
                this.goBackFlag = goBackFlag
                this.closeLoading()
            },
            closeLoading() {
                this.timer = null
                this.timer = setTimeout(() => {
                    this.loading = false
                }, 1000)
            }
        }
    })
</script>
</body>
</html>
